<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/transaction/add_form.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/alert.css">
</script>
<style>
      #title-name{
        font-size: 15px;
    }
    .row .layui-form-label{
        width: 100px;
        text-align: right;
    }
    .row .layui-form-select .layui-input{
        padding-right: 0;
    }
    #LAY-popup-content-tags{
        overflow: auto
    }
    .row{
        margin: 0;
    }
    .row .footer{
        margin: 0;
        margin-top: 30px;
    }
</style>
<div class="layui-form row" lay-filter="layuiadmin-form-tags" id="layuiadmin-form-tags">
    <ul class="layui-row layui-form row">
        <li class="layui-col-xs4 layui-col-sm4 layui-col-md4">


            <div class="flex layui-form-item">
                <label class="layui-form-label"> 新负责部门：</label>
                <div class="layui-input-block">

                    <input type="text" id="treeSelect" name="tcDetailFia11" autocomplete="off" class="layui-input " lay-verify="required">

                </div>
            </div>
            <div class="flex layui-form-item">
                <label class="layui-form-label"> 新所在厂房：</label>
                <div class="layui-input-block">
                    <select id="tcDetailFia14" name="tcDetailFia14" lay-filter="selectTemplate" lay-search lay-verify="required">

                    </select>
                </div>
            </div>

            <div class="flex layui-form-item">
                <label class="layui-form-label"> 新站别：</label>
                <div class="layui-input-block">

                    <select id="tcDetailFia16" name="tcDetailFia16" lay-search lay-verify="required">

                    </select>

                </div>
            </div>
            <div class="flex layui-form-item">
                <label class="layui-form-label"> 新线别：</label>
                <div class="layui-input-block">
                    <select id="tcDetailFia17" name="tcDetailFia17" lay-search lay-verify="required">
                    </select>
                </div>
            </div>
            <div class="flex layui-form-item">
                <label class="layui-form-label"> 新所在楼层：</label>
                <div class="layui-input-block">
                    <select id="tcDetailFia15" name="tcDetailFia15" lay-search lay-verify="required">

                    </select>

                </div>
            </div>
        </li>
    </ul>

    <div class="footer layui-btn-containner">
        <button class="commit layui-btn layui-btn-radius layui-btn-primary"  lay-submit lay-filter="LAY-submit">确认</button>
        <button class="cancel layui-btn layui-btn-radius layui-btn-primary" lay-filter="LAY-cancel">取消</button>
    </div>
</div>
<script>
    layui.use(['admin', 'form', 'api', 'table', 'laytpl', 'utill', 'laydate', 'treeSelect'], function () {
        var $ = layui.$,
            admin = layui.admin,
            view = layui.view,
            api = layui.api,
            table = layui.table,
            setter = layui.setter,
            jquery = layui.jquery,
            laydate = layui.laydate,
            form = layui.form;
        layer = layui.layer,
            util = layui.util,
            treeSelect = layui.treeSelect,

            admin.req({
                url: api.host + api.selectCoaltDept,
                data: {
                    tcReqCoalt: sessionStorage.getItem('tcReqCoalt')
                },
                done: function (res) {


                    function transferKey(odata) {
                        odata.forEach(obj => {
                            obj.title = obj.gem02
                            obj.children = obj.deptVOS
                            delete obj["gem02"]
                            delete obj["deptVOS"]
                            if (obj.children instanceof Array) {
                                transferKey(obj.children)
                            }
                        })
                        return odata
                    }
                    odataArr = transferKey(res.data)

                    treeSelect.render({
                        elem: "#treeSelect",
                        node: odataArr,
                        done: (data) => {


                            $("#treeSelect").val(data.data.title + "/" + data.data.gem01)
                        }
                    })

                }
            });




        form.on('select(selectTemplate)', function (data) {


            var id = data.value.split("/")[0].replace(/\s+/g, "");
            admin.req({
                url: api.host + api.selectFtyFlr,

                data: {
                    ftyId: id
                },
                done: function (res) {



                    var str = '<option value=""></option>'
                    for (let index = 0; index < res.data.length; index++) {
                        str = str + `<option value="${res.data[index].tcFlrId}/${res.data[index].tcFlrName }">${res.data[index].tcFlrName}</option>`

                    }

                    $('#tcDetailFia15').html(str)
                    form.render(null, 'layuiadmin-form-tags');
                }
            });
        })


        admin.req({
            url: api.host + api.selectCoaltFty,
            data: {
                tcReqCoalt: sessionStorage.getItem('tcReqCoalt')
            },
            done: function (res) {


                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    str = str +
                        `<option value=" ${res.data[index].tcFtyId}/${res.data[index].tcFtyName }">${res.data[index].tcFtyName}</option>`

                }
                $('#tcDetailFia14').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        admin.req({
            url: api.host + api.selectFiaProcId,
            type: 'post',
            data: {
                tcReqCoalt: sessionStorage.getItem('tcReqCoalt')
            },
            done: function (res) {



                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    str = str + `<option
            value=" ${res.data[index].tcProcId}/${res.data[index].tcProcName }">${res.data[index].tcProcName }</option>`

                }

                $('#tcDetailFia16').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
        admin.req({
            url: api.host + api.selectFiaLineId,
            type: 'post',
            data: {
                tcReqCoalt: sessionStorage.getItem('tcReqCoalt')
            },
            done: function (res) {

                var str = '<option value=""></option>'
                for (let index = 0; index < res.data.length; index++) {
                    str = str +
                        `<option
                value=" ${res.data[index].tcLineId}/${res.data[index].tcLineName }">${res.data[index].tcLineName}</option>`

                }

                $('#tcDetailFia17').append(str)
                form.render(null, 'layuiadmin-form-tags');
            }
        });
    });
</script>